<template>
  <div>
    <header>
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <div id="banner">
      <van-image
        width="300"
        height="300"
        :src="uploads+news.img"
      />
    </div>
    <article>
      <h1>{{ news.title }}</h1>
      <p class="type">
        <span>分类:<span id="type">{{ news.type.name }}</span></span>
        <span>发布日期：<span id="create_time">{{ news.create_time }}</span></span>
      </p>
    </article>
    <hr />
    <div id="content" v-html="news.content"></div>
  </div>
</template>
<script>
import axios from "axios";
export default {
    
  data() {
    return {
      news: {},
      uploads:this.$store.state.uploads
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
  },

  created() {
    axios
      .get("/api/news/newsdetail?id=" + this.$route.params.id)
      .then((res) => {
        this.news = res.data.data;
      });
  },
};
</script>

<style scoped>
    #banner{
       display:flex;
       justify-content: center; 
    }
      .type{
            font-size: 14px;
        }

        .type>:last-child{
            float: right;
        }
</style>